<template>
  <swiper class="swiper" circular :duration="500" :current="currentIndex">
    <swiper-item
      v-for="componentName in myComponentsNames.panel"
      :key="componentName"
    >
      <view class="panel-page-box">
        <view class="top-layout"></view>

        <!-- 页面瀑布流滚动盒子 -->
        <scroll-view
          class="panel-list-scroll"
          scroll-y="true"
          :show-scrollbar="false"
        >
          <view
            class="panel-list-page"
            :class="allData[componentName].styleClass"
          >
            <!-- 每一项数据 simulatedData模拟数据-->
            <view
              class="panel-list-item"
              v-for="itemData in allData[componentName].dataList"
              :key="itemData.id"
            >
              <!-- 动态每个面板组件 -->
              <component :is="componentName" :showData="itemData"> </component>
            </view>
          </view>
          <view class="no-more">暂无更多数据</view>
        </scroll-view>
      </view>
    </swiper-item>
  </swiper>
</template>

<script setup>
// 横向滑动
import {
  damaiData,
  dewuData,
  xianyuData,
  taobaoData,
  weipinhuiBigData,
} from "@/common/simulatedData.js";
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { myComponentsNames } from "@/components/globalComponents";
// 接收props
const props = defineProps({});
const currentIndex = ref(0);
// 接收url参数
onLoad((option) => {
  console.log(option);
  currentIndex.value = option.index;
});
// 每个列表对应的数据
const allData = {
  panel001: {
    dataList: damaiData, //对应的数据
    styleClass: "damai", //对应的样式布局，有无间距默认有比那句
  },
  panel002: {
    dataList: dewuData,
    styleClass: "duwu",
  },
  panel003: {
    dataList: xianyuData,
    styleClass: "xianyu",
  },
  panel004: {
    dataList: taobaoData,
    styleClass: "xianyu",
  },
  panel005: {
    dataList: dewuData,
    styleClass: "duwu",
  },
  panel006: {
    dataList: weipinhuiBigData,
    styleClass: "damai",
  },
};
</script>

<style scoped lang="less">
.swiper {
  height: 100vh !important;
  bottom: 0 !important;
  padding: 0 !important;
}
.panel-page-box {
  .top-layout {
    height: 80rpx;
    background: #fff;
  }
  .panel-list-scroll {
    width: 100%;
    height: calc(100vh - 80rpx);
    background: #f0f0f0;
  }
  .panel-list-page {
    width: 100%;
    column-count: 2;
    column-gap: 0rpx;
    // 行间距
    padding: 0 10rpx;
    box-sizing: border-box;
    .panel-list-item {
      // break-inside: avoid;
      // 在每个组件中设置一下样式
      // background: #fff;
      // border-radius: 10rpx;
      // overflow: hidden;
    }
    &.duwu {
      column-gap: 1rpx;
      background: #f8f8f8;
      .panel-list-item {
        margin-bottom: 1rpx;
      }
    }
    &.damai {
      column-gap: 20rpx;
      .panel-list-item {
        margin-bottom: 20rpx;
      }
    }
    &.xianyu {
      column-gap: 20rpx;
      background: #fff;
      .panel-list-item {
        margin-bottom: 30rpx;
      }
    }
  }
  .no-more {
    text-align: center;
    color: #999999;
    font-size: 22rpx;
    height: 80rpx;
    line-height: 80rpx;
  }
}
</style>
